<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="state.queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="店铺" prop="shopId">
				<select-shop ref="selectShopRef" v-model="state.queryParams.shopId"></select-shop>
			</el-form-item>
			<el-form-item label="订单类型" prop="orderType">
				<el-select v-model="state.queryParams.orderType" clearable placeholder="请选择订单类型">
					<el-option v-for="item in order_type" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="支付状态" prop="payStatus">
				<el-select v-model="state.queryParams.payStatus" clearable placeholder="请选择支付状态">
					<el-option v-for="item in pay_status" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="支付类型" prop="payType">
				<el-select v-model="state.queryParams.payType" clearable placeholder="请选择支付类型">
					<el-option v-for="item in pay_type" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="配送方式" prop="deliveryWay">
				<el-select v-model="state.queryParams.deliveryWay" clearable placeholder="请选择配送方式">
					<el-option v-for="item in delivery_way" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="支付时间" prop="paymentQueryTimes">
				<el-date-picker
					v-model="state.queryParams.paymentQueryTimes"
					type="datetimerange"
					:shortcuts="shortcuts"
					value-format="YYYY-MM-DD HH:mm:ss"
					range-separator="-"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
				/>
			</el-form-item>
			<el-form-item label="订单号" prop="orderNo">
				<el-input v-model="state.queryParams.orderNo" clearable placeholder="请输入订单号"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery(queryRef)">
					<el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" :printRef="printRef" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<Deliver ref="deliverRef" @handleSuccess="initPage"></Deliver>
		<el-tabs v-model="activeType" type="card" @tab-click="tabHandle">
			<el-tab-pane label="全部" name="all"></el-tab-pane>
			<el-tab-pane label="待付款" name="1"></el-tab-pane>
			<el-tab-pane label="待发货/待自提" name="2"></el-tab-pane>
			<el-tab-pane label="待收货" name="3"></el-tab-pane>
			<el-tab-pane label="已完成" name="4"></el-tab-pane>
			<el-tab-pane label="交易已关闭" name="11"></el-tab-pane>
		</el-tabs>
		<!-- 列表 -->
		<el-table ref="printRef" v-loading="loading" :data="state.tableData" border>
			<el-table-column prop="shopInfo.name" label="店铺" align="center"> </el-table-column>
			<el-table-column prop="orderItemList" label="订单信息" width="450">
				<template #default="scope">
					<el-row :gutter="24" v-for="(item, index) in scope.row.orderItemList" :key="index" class="order-item">
						<el-col :span="4">
							<el-image style="width: 60px; height: 60px" :src="item.picUrl" fit="cover" :preview-teleported="true"></el-image>
						</el-col>
						<el-col :span="15">
							<span class="overflow-line-clamp-2 name">
								{{ item.spuName }}
							</span>
							<p>{{ item.specsInfo }}</p>
							<p>
								<span style="color: red" v-if="item.couponPrice > 0"> 优惠券减免：-{{ item.couponPrice }}元 </span>
								<span style="color: red" v-if="item.vipPrice > 0"> 会员减免：-{{ item.vipPrice }}元 </span>
							</p>
						</el-col>
						<el-col :span="5">
							<span style="color: #f56c6c">{{ item.paymentPrice }}元</span>
							<p>x{{ item.buyQuantity }}</p>
							<el-tag type="danger" effect="light" round v-if="item.status != '0'">
								{{ item.statusDesc }}
							</el-tag>
						</el-col>
					</el-row>
				</template>
			</el-table-column>
			<el-table-column prop="orderType" label="订单类型" align="center" width="100">
				<template #default="scope">
					<dict-tag :options="order_type" :value="scope.row.orderType"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column prop="deliveryWay" label="配送方式" align="center" width="100">
				<template #default="scope">
					<dict-tag :options="delivery_way" :value="scope.row.deliveryWay"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" align="center" width="100">
				<template #default="scope">
					<el-tag :type="scope.row.status == '4' ? 'success' : 'danger'" round>
						{{ scope.row.statusDesc }}
					</el-tag>
					<el-divider style="margin: 10px 0px" />

					<dict-tag :options="pay_status" :value="scope.row.payStatus"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="时间" width="250">
				<template #default="scope">
					<div>创建时间：{{ scope.row.createTime }}</div>
					<div v-if="scope.row.paymentTime">付款时间：{{ scope.row.paymentTime }}</div>
					<div v-if="scope.row.deliverTime">{{ scope.row.deliveryWay == '2' ? '自提时间：' : '发货时间：' }}{{ scope.row.deliverTime }}</div>
					<div v-if="scope.row.receiverTime">收货时间：{{ scope.row.receiverTime }}</div>
				</template>
			</el-table-column>
			<el-table-column prop="totalPrice" label="订单金额" width="220">
				<template #default="scope">
					<div>订单金额：￥{{ scope.row.totalPrice }}</div>
					<div>运费：+￥{{ scope.row.freightPrice }}</div>
					<div style="color: red">优惠券：-￥{{ scope.row.couponPrice ? scope.row.couponPrice : 0 }}</div>
					<div style="color: red">会员减免：-￥{{ scope.row.vipPrice ? scope.row.vipPrice : 0 }}</div>
					<div style="color: red">支付金额：￥{{ scope.row.paymentPrice }}</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200" align="center" fixed="right">
				<template #default="scope">
					<el-button link type="primary" v-auth="'order:orderinfo:get'" @click="detail(scope.row)">
						<el-icon><ele-View /></el-icon> 详情
					</el-button>
					<el-button
						link
						type="primary"
						v-auth="'order:orderinfo:deliver'"
						v-if="scope.row.status == '2' && scope.row.deliveryWay == '1'"
						@click="deliverOrder(scope.row)"
					>
						<el-icon><ele-Van /></el-icon>
						发货
					</el-button>
					<el-button
						link
						type="danger"
						v-auth="'order:orderinfo:del'"
						v-if="scope.row.status == '11' && scope.row.payStatus == '0'"
						@click="del(scope.row.id)"
					>
						<el-icon><ele-Delete /></el-icon>
						删除
					</el-button>
					<el-button
						link
						type="warning"
						v-auth="'order:orderinfo:cancel'"
						v-if="scope.row.status == '1' && scope.row.payStatus == '0'"
						@click="cancel(scope.row.id)"
					>
						<el-icon><ele-Delete /></el-icon>
						取消
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="state.page.total"
			v-model:currentPage="state.page.currentPage"
			v-model:pageSize="state.page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts" setup name="order">
import { defineAsyncComponent, ref, reactive } from 'vue';
import { getPage, delObj, cancelObj } from '/@/api/order/orderinfo';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useDict } from '/@/utils/dict';
import type { FormInstance } from 'element-plus';
const Deliver = defineAsyncComponent(() => import('./deliver/index.vue'));
const SelectShop = defineAsyncComponent(() => import('/@/components/selectShop/index.vue'));
// 字典
const queryRef = ref<FormInstance>();
const { pay_type, pay_status, order_type, delivery_way } = useDict('pay_type', 'pay_status', 'order_type', 'delivery_way');
const state = reactive({
	queryParams: {
		orderType: '',
		payStatus: '',
		deliveryWay: '',
		shopId: '',
		payType: '',
		paymentQueryTimes: '',
		orderNo: '',
	},
	page: {
		total: 0,
		currentPage: 1,
		pageSize: 20,
		ascs: [],
		descs: 'create_time',
	},
	tableData: [],
});
const shortcuts = [
	{
		text: 'Last week',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setDate(start.getDate() - 7);
			return [start, end];
		},
	},
	{
		text: 'Last month',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setMonth(start.getMonth() - 1);
			return [start, end];
		},
	},
	{
		text: 'Last 3 months',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setMonth(start.getMonth() - 3);
			return [start, end];
		},
	},
];
const $route = useRouter();
const showSearch = ref(true);
const loading = ref(false);
const deliverRef = ref();
const printRef = ref();
const activeType = ref('all');

const initPage = async () => {
	loading.value = true;
	let params = {
		current: state.page.currentPage,
		size: state.page.pageSize,
		ascs: state.page.ascs,
		descs: state.page.descs,
		status: activeType.value == 'all' ? '' : activeType.value,
	};
	await getPage(Object.assign(params, state.queryParams))
		.then((response) => {
			state.tableData = response.data.data.records;
			state.page.total = response.data.data.total;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 重置搜索表单
 */
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
/**
 * 订单详情
 */
const detail = (row: any) => {
	$route.push({ path: '/order/orderinfo/info', query: { id: row.id } });
};
/**
 * 删除按钮
 */
const del = (id: string) => {
	ElMessageBox.confirm('此操作将删除该订单，是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		delObj(id)
			.then((response) => {
				ElMessage.success('删除成功');

				initPage();
			})
			.catch(() => {});
	});
};
/**
 * 取消订单
 */
const cancel = (id: string) => {
	ElMessageBox.confirm('此操作将取消该订单，是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		cancelObj(id)
			.then((response) => {
				ElMessage.success('取消成功');
				initPage();
			})
			.catch(() => {});
	});
};
/**
 * 订单状态切换
 */
const tabHandle = (event: any) => {
	activeType.value = event.paneName;
	initPage();
};
/**
 * 发货
 */
const deliverOrder = (row: any) => {
	deliverRef.value.initPage(row.id, row.orderLogisticsId);
};
initPage();
</script>
<style scoped lang="scss">
.order-item {
	margin-left: 0px !important;
	margin-right: 0px !important;
	border: 1px solid #e4e7ed;
	padding: 5px;
	margin: 5px;
	border-radius: 4px;

	.name {
		color: #409eff;
	}
}
</style>
